<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${post.title}">帖子详情 - AI Hub</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/post-detail.css}">
    
    <link rel="stylesheet" th:href="@{/css/category.css}">
</head>
<body>
    <header>
        <div class="header-container">
            <h1>AI Hub 社区</h1>
            <nav>
                <ul>
                    <li><a th:href="@{/}">首页</a></li>
                    <li><a th:href="@{/posts}">帖子</a></li>
                    <li><a th:href="@{/users}">用户</a></li>
                    <!-- 已登录状态显示欢迎信息和退出 -->
                    <sec:authorize access="isAuthenticated()">
                        <li class="welcome-message">
                            欢迎：<span sec:authentication="principal.username"></span>
                            <a th:href="@{/logout}" class="logout-link">退出</a>
                        </li>
                    </sec:authorize>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <div class="post-detail-container">
            <!-- 帖子主体内容 -->
            <div class="post-main">
                <!-- 帖子头部：作者信息 -->
                <div class="post-header">
                    <img th:src="@{${post.user.avatar != null ? post.user.avatar : '/images/default-avatar.jpg'}}" 
                         alt="作者头像" class="author-avatar">
                    <div class="author-info">
                        <a th:href="@{/profile/{id}(id=${post.user.id})}" th:text="${post.user.username}" class="author-name"></a>
                        <span th:text="${#temporals.format(post.createdAt, 'yyyy-MM-dd HH:mm')}" class="post-time"></span>
                    </div>
                </div>

                <!-- 帖子标题 -->
                <h2 th:text="${post.title}" class="post-title"></h2>

                <!-- 帖子媒体内容 -->
                <div class="post-media">
                    <div th:if="${post.videoUrl}" class="video-container">
                        <video th:src="${post.videoUrl}" controls poster="${post.videoThumbnailUrl}">
                            您的浏览器不支持HTML5视频播放
                        </video>
                    </div>
                    <div th:unless="${post.videoUrl}" class="image-container">
                        <img th:src="@{${post.coverImageUrl != null ? post.coverImageUrl : '/images/default-cover.jpg'}}" 
                             alt="帖子图片" class="post-image">
                    </div>
                </div>

                <!-- 帖子文本内容 -->
                <div class="post-content" th:text="${post.content}"></div>

                <!-- 帖子互动按钮 -->
                <div class="post-actions">
                    <button id="likeBtn" class="action-btn like-btn">
                        <i class="like-icon">👍</i> <!-- 改为大拇指图标 -->
                        <span th:text="${post.likeCount}">点赞</span>
                    </button>
                    <button id="commentBtn" class="action-btn comment-btn">
                        <i class="comment-icon"></i>
                        <span th:text="${post.commentCount}">评论</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="share-icon"></i>
                        <span>分享</span>
                    </button>
                </div>

                <!-- 分隔线 -->
                <hr class="divider">

                <!-- 评论区 -->
                <div class="comments-section">
                    <h3>评论</h3>
                    
                    <!-- 评论输入框 -->
                    <div class="comment-input-container">
                        <img th:src="@{${currentUser != null && currentUser.avatar != null ? currentUser.avatar : '/images/default-avatar.jpg'}}"
                             alt="当前用户头像" class="current-user-avatar">
                        <textarea id="commentText" placeholder="写下你的评论..." rows="3"></textarea>
                        <button id="submitCommentBtn" class="btn">发布评论</button>
                    </div>

                    <!-- 评论列表 -->
                    <div class="comments-list">
                        <!-- 评论将通过JavaScript动态加载 -->
                    </div>
                </div>
            </div>

            <!-- 侧边栏：相关推荐 -->
            <div class="sidebar">
                <h3>相关推荐</h3>
                <div class="related-posts">
                    <!-- 简化处理，避免模板错误 -->
                    <p>暂无相关推荐</p>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <p>&copy; 2025 AI Hub 社区. 保留所有权利.</p>
    </footer>

    <script th:src="@{/js/main.js}"></script>
    <script th:src="@{/js/post-detail.js}"></script>
</body>
</html>